<template>
  <div class="detail" v-if="item">
    <div class="goodslist">
      <ul>
        <li>
          <div class="relative">
            <img v-bind:src="item.imageUrl"/>
            <div class="labelArr flex">
              <i class="icon icon-love"></i> <span>{{item.love}}</span>
            </div>
          </div>
          <div class="desc">
            <p class="title">{{item.title}}</p>
            <div class="flex">
              <div>
                <div class="flex  flex-start">
                  <i class="icon icon-clock"></i> <span>{{item.timeStamp}}</span>
                </div>
                <div class="flex  flex-start">
                  <i class="icon icon-address"></i><span>{{item.address}}</span>
                </div>
              </div>
              <div style="align-self:flex-end"><span class="price">￥{{item.price}}</span></div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="detail-content">
      <div v-html="item.info"></div>
    </div>
    <footer>
      <div class="flex">
        <div class="f1 align-self" @click="addLikeNumber()">
          <i class="icon icon-love-grey" v-bind:class="{active:isLike}"></i>
          <span>想去</span>
        </div>
        <div class="f2 align-self">
          <a href="tel:020-89442063">
            <i class="icon tel-grey"></i>
            <span>电话咨询</span>
          </a>
        </div>
        <div class="f3 align-self" @click="signUp()"> 立即报名 </div>
      </div>
    </footer>
    <v-loading :showLoading="showLoading"></v-loading>
  </div>
</template>
<script>
  import {HttpRequest} from '../../common/js/httpFun'
  import {linklist} from '../../common/js/mockdata'
  import {setWechatTitle, AlertDialog} from '../../common/js/common'
  import Loading from '../loading/index'
  export default({
    data () {
      return {
        'pid': '',
        'item': null,
        'selectedId': null,
        'showLoading': false,
        'isLike': false
      }
    },
    created () {
      this.pid = this.$route.params.id
      if (!this.pid) {
        AlertDialog('警告', '请选择您要看的旅游项目', '确认', true)
      }
      this.fetchData()
    },
    methods: {
      fetchData () {
        /* 根据JouneryId获取旅游的详情 */
        let param = {pid: this.pid}
        this.showLoading = true
        let result = HttpRequest(linklist.activityDetailUrl, param, 2)
        result.then((response) => {
          let body = response.body
          if (body.code === 0) {
            this.item = body.data
            this.$nextTick(function () {
              setWechatTitle(this.item.title)
            })
            let oneday = 3600 * 24 * 1000
            let diff = this.item.endTime - this.item.startTime - oneday
            let startdate = new Date(this.item.startTime)
            let enddate = new Date(this.item.endTime)
            let startTime = startdate.getMonth() + '月' + startdate.getDate() + '日 ' + startdate.getHours() + ':' + startdate.getSeconds()
            let endTime = ''
            if (diff > 0) {
              // 开始时间和截至时间大于一天
              endTime = enddate.getMonth() + '月' + enddate.getDate() + '日 ' + enddate.getHours() + ':' + enddate.getSeconds()
            }
            else {
              // 开始时间和截至时间在同一天
              endTime = enddate.getHours() + ':' + enddate.getSeconds()
            }
            this.item.timeStamp = startTime + '~' + endTime
            this.isLike = this.item.myLove
          }
          else {
            AlertDialog('提示', body.msg)
          }
          this.showLoading = false
        }, (response) => {
          this.showLoading = false
          AlertDialog('提示', '获取详情失败，请稍后再试', '确定', true)
        }).catch((response) => {
          this.showLoading = false
          AlertDialog('提示', '获取详情失败，请稍后再试', '确定', true)
        })
      },
      signUp () {
        this.$router.push({name: 'funSingup', params: {id: this.item.pid}})
      },
      addLikeNumber () {
        this.isLike = !this.isLike
        this.isLike ? this.item.like++ : this.item.like--
        this.showLoading = true
        let result = HttpRequest(linklist.addLikeNumber, {pid: this.pid, love: this.isLike ? 1 : 0}, 2)
        result.then((response) => {
          this.showLoading = false
          let body = response.body
          if (body.code === 0) {

          }
          else {
            AlertDialog('错误', body.msg)
          }
        }, response => {
          this.showLoading = false
          AlertDialog('错误', '失败啦，请稍后再试', '确定', true)
        }).catch(response => {
          this.showLoading = false
          AlertDialog('错误', '失败啦，请稍后再试', '确定', true)
        })
      }
    },
    components: {
      'v-loading': Loading
    }
  })
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/redifined.styl"
  @import "./style.styl"
</style>
